<template>
  <view class="articalDetail_container app_container_page">
    <image :src="articalList.pics"></image>
    <view class="articalDetailContent">
      <view class="head">
        <view class="title">
          {{ articalList.title ? articalList.title : '--' }}
        </view>
        <view class="time">
          {{
            articalList.updateTime
              ? dayjs(new Date()).format('YYYY-MM-DD') === dayjs(articalList.updateTime).format('YYYY-MM-DD')
                ? dayjs(articalList.updateTime).from(dayjs())
                : articalList.updateTime
              : articalList.createTime
              ? dayjs(new Date()).format('YYYY-MM-DD') === dayjs(articalList.createTime).format('YYYY-MM-DD')
                ? dayjs(articalList.createTime).from(dayjs())
                : articalList.createTime
              : ''
          }}
        </view>
      </view>
      <view class="yql-snow">
        <rich-text class="ql-editor content" :nodes="UnchangeContent(articalList.content)"> </rich-text>
      </view>
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import { findDietById } from '@/api/home.js'
export default {
  data() {
    return {
      dayjs: null,
      articalList: {}
    }
  },
  methods: {
    // 富文本部分反解析
    UnchangeContent(str) {
      return str ? str.replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/quot;/g, '"').replace(/<img/g, '<img style="max-width: 100%;"') : ''
    }
  },
  created() {
    this.dayjs = dayjs
  },
  async onLoad(val) {
    findDietById({
      dietId: val.id
    })
      .then((res) => {
        if (res.code === 200) {
          this.articalList = res.data
        }
      })
      .catch((err) => {
        console.log(err)
      })
  }
}
</script>

<style lang="scss">
.articalDetail_container {
  image {
    width: 750rpx;
    // height: 750rpx;
  }

  .articalDetailContent {
    overflow: hidden;
    padding-bottom: 160rpx;
    margin: 0 30rpx;

    .head {
      padding-bottom: 42rpx;
      .title {
        font-size: 40rpx;
        line-height: 46rpx;
        padding: 97rpx 0 18rpx 0;
      }

      .time {
        font-size: 24rpx;
        color: #999999;
        line-height: 28rpx;
      }
    }
    .content {
      p {
        line-height: 40rpx;
      }
    }
  }
}
</style>
